<template>
  <!-- 在视图模板上，可直接使用 props 中的属性 -->
  <button
    :class="{ error, flat }"
    :title="tips"
    @click="showPropsData"
    @mousedown.right="changeErrorProps"
  >
    {{ title }}
  </button>
</template>

<script>
export default {
  props: {
    // 自定义属性选项
    title: {
      type: String,
      required: true,
    },
    error: Boolean,
    flat: Boolean,
    tips: {
      type: String,
      default: '我是一个普通的按钮',
    },
  },
  methods: {
    showPropsData() {
      // 在选项式 API JS 中，可以通过 this.$props 来访问 props 中的内容
      console.log(this.$props)
      console.log(this.$props.title)
      console.log(this.$props.error)
      console.log(this.$props.flat)
    },
    changeErrorProps() {
      this.$props.error = !this.$props.error // 不能直接修改 props 的数据，因为是只读的
    },
  },
}
</script>

<script setup>
let propsData = defineProps({
  // 声明接收父组件传递的属性值：自定义属性
  title: {
    type: String,
    required: true,
  },
  error: Boolean,
  flat: Boolean,
  tips: {
    type: String,
    default: '我是一个普通的按钮',
  },
})

function showPropsData() {
  console.log(propsData) // 在 JS 中，需要通过 defineProps 返回对象来访问 props 的内容
  console.log(propsData.title)
  console.log(propsData.error)
  console.log(propsData.flat)
}

function changeErrorProps() {
  // propsData.error = !propsData.error  // 不能直接修改 props 的数据，因为是只读的
}
</script>

<style scoped>
button {
  border: none;
  padding: 12px 25px;
}

.error {
  background-color: rgb(197, 75, 75);
  color: white;
}

.flat {
  box-shadow: 0 0 10px grey;
}
</style>
